
<script>
import { uuid } from 'vue-contextmenujs/src/util'

export default {
  name: 'detail',

  render: function (h, context) {
    return h('div',{
      class:{
        "detailPopup":true
      },
    },
    [
      this.data.previous?h('div',{class:'return',on:{click:this.data.previousClick.bind(this)}},'返回'):'',
      h('div',{class:'close',on:{
        click:this.close
        }},'×'),
      h('div',{class:'detailTitle'},this.data.title),
      h('div',{class:'flex j-content to'},
        this.setTh(h)
       ),
      h('div',{class:'detailContent flex'},
      this.setColumn(h)
      )
    ]
    )
  },
  /**
   * data params
   * title
   * props: [{prop,label}]
   * data: array
  * */
  props:{
    data:{
      type:Object,
      default:{
        title:'公司直营数据展示',
        props:[{label:'配送中心'},{label: '销售单数'},{label:'销售箱数'},{label:'销售金额'}],
      }
    },
    visible:{
      type:Boolean,
      default:false
    },
  },

  methods:{
    close(){
      this.$emit('update:visible',false)
    },
    setTh(h){
      const VDomList = []
      for (let item of this.data.props){
        VDomList.push(
          h(
            'div',
          this.setTHAttribute(item),
            item.label
        ))
      }
      return VDomList
    },
    setTHAttribute(obj){
      const attribute = {class:'th flex j-content fl1'}
      if(obj.width){
        attribute['width'] = obj.width
        attribute['class'] = 'th flex j-content'
      }
      return attribute
    },
    setContent(){

    },
    setColumn(h){
      const columnList = []
      for (let i of this.data.props){
        columnList.push(
          h('div',{class:i.width?'detail-column flex':'detail-column flex fl1'},this.setTd(i.prop,h))
        )
      }
      return columnList
    },
    setTd(type,h){
      const tdList = []
      for(let i of this.data.data){
        if (i[type] instanceof Object){
          const on = {}
          Object.keys(i[type].on).forEach(key=>{
            on[key] = i[type].on[key].bind(this)
          })
          i[type].attribute = i[type].attribute|| {}
          tdList.push(h('div', {class:'data flex j-content a-item',key:uuid(),...i[type].attribute,on},i[type].value ))
        }else{
          //报表所有小数位截取
          if (typeof i[type] === 'number')i[type] = i[type]>>0
          tdList.push(h('div',{class:'data flex j-content a-item'}, i[type]))
        }
      }
      return tdList
    },
    previous(){
      this.$emit('previous')
    },
  }
}
</script>

<style lang="scss" scoped>
.detailPopup{
  position: absolute;
  width: 60%;
  height: 60%;
  display: block;
  background-image: url("../../../assets/images/cockpit/popup.png");
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: 99;
  left: 20% ;
  top: 20%;
  overflow: hidden;
  padding:0 2%;
  .close{
    color: #52A2E6;
    position: absolute;
    right: 2%;
    top: 2%;
    cursor: pointer;
    font-size: 0.6em;
  }
  .return{
    color: #52A2E6;
    position: absolute;
    top: 3%;
    cursor: pointer;
    font-size: 0.8em;
  }
  .detailTitle{
    color: white;
    font-size: 1em;
    margin-top: 2%;
    width: 100%;
    height: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .th{
    color: #F7F8FA;
    font-size: 0.7em;
  }
  .detailContent{
    overflow-y: auto;
    height: 80%;
    &::-webkit-scrollbar{
      width: 0;
    }
    .detail-column{
      color: #F7F8FA;
      font-size: 0.7em;
      flex-direction: column;
      .data{
        min-height: 2em;
      }
    }
  }
}
.to{
  background: rgba(14, 95, 255,.2);
}
.one{
  background: rgba(14, 95, 255,.1)
}
</style>
